<template>
	<view class="container">

		<view class="">
			<view class="text-15 flex justify-start align-center">
				<scroll-view scroll-x class="bg-white nav text-666 position" style="width:100%;" scroll-with-animation
					:scroll-left="scrollLeft">
					<view class="cu-item" :class="TabCur==999?'color cur text-bold':''" @tap="tabSelect" :data-value='999' :data-id="999">
						<view>全部</view>
					</view>
					<view class="cu-item" :class="item.id==TabCur?'color cur text-bold':''"
						v-for="(item,index) in classification1" @tap="tabSelect" :data-value='item.value' :data-id="item.id">
						<view>{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<view style="margin-top: 120rpx;">
				<view
					@click="toPage('/filePage/pages/screen-detail/screen-detail?serviceType=' + item.serviceType + '&id=' + item.id)"
					class="bg-white radius10 padding margin-sm" v-for='(item,index) in list' :key='index'>
					<view class="flex justify-between align-center text-bold">
						<view class="text-lg text-333">
							{{item.description}}
						</view>
						<view class="color text-sm">
							<block v-if='item.serviceStatus==1'>待接单</block>
							<block v-if='item.serviceStatus==2'>已接单</block>
							<block v-if='item.serviceStatus==7'>已勘察</block>
							<block v-if='item.serviceStatus==3'>已完成</block>
							<block v-if='item.serviceStatus==4'>已验收</block>
							<block v-if='item.serviceStatus==5'>已评价</block>
							<block v-if='item.serviceStatus==6'>已取消</block>
						</view>
					</view>
					<!-- <view class="text-sm text-999 margin-top-sm">
						{{item.sysCategoryName}}
					</view> -->
					<view class="flex justify-between align-center text-bold margin-top">
						<view class="flex justify-start align-center">
							<!-- <view class="color">
								<text class="text-sm">¥ </text>
								<text class="text-17">{{item.price/100}}</text>
							</view> -->
							<view class="text-sm text-999 margin-left-sm">
								{{item.title}}
							</view>
						</view>
						<view class="text-red text-sm" v-if='item.serviceStatus!=5'>
							<block v-if='item.pastTime>0'>
								订单剩余时间{{item.pastTime}}小时
							</block>
							<block v-else>
								<block v-if='item.serviceStatus==1 || item.serviceStatus==6'>
									已过期
								</block>
							</block>
						</view>
					</view>
					<view class="flex justify-end align-center margin-top"
						v-if='item.serviceStatus==2 && item.receiverId==userId '>
						<button @click.stop="toPage2('/filePage/pages/surveyScreen/surveyScreen?item=',item)"
							class="btn round text-13 text-white bg-color">确认勘察</button>
					</view>
					<view class="flex justify-end align-center margin-top"
						v-if='item.serviceStatus==7 && item.receiverId==userId '>
						<button @click.stop="submit(item.id)" class="btn round text-13 text-white bg-color">申请完成</button>
					</view>
					<view class="flex justify-end align-center margin-top"
						v-if='item.serviceStatus==3 && item.userId==userId'>
						<button class="btn round text-13 text-white bg-color margin-left-sm"
							@click.stop="checkOutState(item)">验收</button>
					</view>
					<view class="flex justify-end align-center margin-top"
						v-if='item.serviceStatus==4 && item.userId==userId'>
						<button class="btn round text-13 text-white bg-color margin-left-sm"
							@click.stop="toPage2('/filePage/pages/addComment/addComment?item=',item)">评价</button>
					</view>
					<view class="flex justify-end align-center margin-top" v-if="item.serviceStatus==5 && item.userId==userId">
						<button  class="btn round text-13 text-white bg-color margin-left-sm"
							@click.stop="toPage('/filePage/pages/orderRecommend/orderRecommend?id='+item.id+'&userId='+item.userId+'&receiverId='+item.receiverId)">评论列表</button>
					</view>
				</view>
			</view>
			
			
		</view>
		<uni-load-more :status="loading" />
	</view>
</template>

<script>
	import BetterPull from '@/common/util/BetterPull'
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = 'loading';
					const obj = {
						pageNum: page,
						pageSize: 10,
						serviceType: 4,
						userId: uni.getStorageSync('userId'),
						receiverId: uni.getStorageSync('userId')
					}
					if (this.TabCur != 999) {
						console.log(this.TabCur)
						obj['serviceStatus'] = this.TabCur
					}
					const [err, res] = await this.$get(this.$api.listOrderServicePool, obj)
					if (res) {
						var data = res.data.list
						done(data);
						if (data.length < 10) {
							this.loading = 'noMore';
						} else {
							this.loading = 'more';
						}

					}
					if (err) {
						done([]);
						this.loading = 'noMore';
					}
				}
			})
		],
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				title: '',
				status: 1,
				loading: "more",
				serviceType: 3,
				TabCur: '999',
				scrollLeft: 0,
				userId: uni.getStorageSync('userId'),
				classification1: [{
						name: '待接单',
						id: '1',
						value:'1'
					}, {
						name: '已接单',
						id: '2',
						value:'2'
					}, {
						name: '已勘察',
						id: '7',
						value:'3'
					},
					{
						name: '已完成',
						id: '3',
						value:'4'
					},
					{
						name: '已验收',
						id: '4',
						value:'5'
					},
					{
						name: '已评价',
						id: '5',
						value:'6'
					},
					{
						name: '已取消',
						id: '6',
						value:'7'
					}
				]
			};
		},
		onLoad(options) {
			if (options.title) {

				uni.setNavigationBarTitle({
					title: options.title
				})
				this.title = options.title
			}
		},
		methods: {
			checkOut(status) {
				console.log(status)
				this.status = status
			},
			toPage(url) {
				this.$util.openNewPage(url)
			},
			toPage2(url, item) {
				const obj = {
					description: item.description,
					descPic: item.descPic,
					id: item.id
				}
				if (item.shopId) {
					obj['shopId'] = item.shopId
				}
				
				this.$util.openNewPage(url + JSON.stringify(obj))
			},
			tabSelect(e) {
				console.log(e)
				if (e.currentTarget.dataset.value != 999) {
					this.scrollLeft = (e.currentTarget.dataset.value - 1) * 60
				}
				this.TabCur = e.currentTarget.dataset.id;
				this.Refresh();
			},
			checkOutState(item) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '你确定验收该订单吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							const data = {
								orderServiceId: item.id
							}
							that.$get(that.$api.updateToAccepted, data).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									that.Refresh();
								}
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},


			submit(id) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '你确定申请完成吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							const data = {
								orderServiceId: id
							}
							that.$get(that.$api.updateToDone, data).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									that.Refresh();

								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		view {
			border-bottom: 6rpx solid #fff;
		}

		.on {
			font-weight: bold;
			color: #221815;
			border-bottom: 6rpx solid #ED7200;
		}
	}

	.btn {
		padding: 20rpx 30rpx;
	}

	.btn2 {
		padding: 20rpx 24rpx;
		border: 2rpx solid;
	}

	.cur>view {
		border-bottom: 4rpx solid;
		width: 100%;
		height: 100%;
	}

	.nav .cu-item.cur {
		border-bottom: 0;
	}
	.position {
		position: fixed;
		background-color: #fff;
		z-index: 99;
		top: 0rpx;
	}
</style>
